<script setup lang="ts">
  import { woReject } from '@/services/case'
  import { getNamesValues } from '@/utils/nameValues'
  import { onLoad } from '@dcloudio/uni-app'
  import { ref } from 'vue'
  import Signin from 'Signin.vue'

  const props = defineProps({
    text: {
      type: String,
      default: '',
    },
    id: {
      type: String || Number,
      default: '',
    },
  })
  // loading
  const loading = ref(false)
  // 是否数据加载完毕
  const showNoSign = ref(false)
  const showPicker = ref(false)
  // 绑定数据
  const data : any = ref({})
  // 表单示例
  const ruleForm : any = ref(null)

  /* 异常签到原因 */
  function changePicker(value : any) {
    data.value.name1 = value.selectedOptions[0].label
    showPicker.value = false
  }
  //弹窗关闭
  function clickClose() {
    showNoSign.value = false
  }
  //提交
  function submit() {
    ruleForm.value?.validate().then(async ({ valid, errors }) => {
      if (valid) {
        loading.value = true
        try {
          await woReject({
            woId: props.id,
            ...data.value,
          })
          showNoSign.value = false
          // 成功提示
          uni.showToast({ icon: 'success', title: '提交成功' })
        } finally {
          loading.value = false
        }
      } else console.log('error submit!!', errors)
    })
  }
  /* end */

  // 页面加载
  onLoad(async () => { })
</script>

<template name="">
  <view class="page">
    <nut-button size="normal" @tap="showNoSign = !showNoSign">{{ props.text }}</nut-button>
    <nut-popup position="bottom" :custom-style="{ height: '100%' }" v-model:visible="showNoSign"
      @click-close-icon="clickClose">
      <view class="title">{{ props.text }}</view>
       <nut-form class="form-box" ref="ruleForm" :model-value="data" :rules="{
          name1: [{ required: true, message: '请选择异常签到原因' }],
          name2: [{ required: true, message: '请输入异常签到说明' }],
        }">
        <nut-form-item label="异常签到原因" prop="name1" label-width="100">
          <nut-input v-model="data.name1" class="nut-input-text" placeholder="请选择异常签到原因" type="text"
            @focus="showPicker = true" />
        </nut-form-item>
        <nut-form-item label="异常签到说明" prop="name2" label-width="100">
          <nut-textarea v-model="data.remark" placeholder="请输入异常签到说明" type="text" />
        </nut-form-item>
        <nut-form-item label="附件111" label-width="100">
          <nut-uploader :url="uploadUrl"></nut-uploader>
        </nut-form-item>
      </nut-form>

      <nut-popup position="bottom" :custom-style="{ height: '40%' }" v-model:visible="showPicker">
        <nut-picker v-model="data.name2" :columns="getNamesValues('APP.NOSIGN.REASON')" title="异常签到原因" :field-names="{
            text: 'label',
          }" @confirm="
            (value:any) => {
              changePicker(value)
            }
          " @cancel="showPicker = false">
        </nut-picker>
      </nut-popup>
      <view class="footer">
       <!-- <nut-button :loading="loading" :disabled="loading" size="large" type="primary" @tap="submit">
          提交
        </nut-button> -->
        <Signin class="button-operate" text="签到" :id="1" :lat="39.46812" :lng="118.143"
          @refreshData="refreshPageData" @close="showSignin = false" />

      </view>
    </nut-popup>
  </view>
</template>

<style lang="scss">
  @import '../styles/case.scss';

  page {
    --nut-primary-color: #54B9CC;
  }

  .title {
    padding: 20rpx;
    font-size: 28rpx;
    font-weight: bold;
    text-align: center;
  }

  .form-box {
    height: auto;
  }
</style>
